<template>
    <div class="user-profile-container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-container">
            <el-breadcrumb separator="/" class="breadcrumb-nav">
                <el-breadcrumb-item>
                    <router-link to="/OnePages" class="breadcrumb-link">首页</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span class="breadcrumb-text">个人设置</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span class="breadcrumb-current">个人信息</span>
                </el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 页面标题和描述 -->
            <div class="page-header">
                <h1 class="page-title">个人信息</h1>
                <p class="page-description">查看和编辑您的个人资料信息</p>
            </div>

            <!-- 分隔线 -->
            <div class="divider"></div>
        </div>

        <!-- 个人信息卡片 -->
        <div class="profile-card">
            <!-- 头像和基本信息区域 -->
            <div class="profile-header">
                <div class="avatar-section">
                    <div class="avatar-container">
                        <el-avatar :size="120" class="user-avatar">
                            <img v-if="avatarUrl" :src="avatarUrl" alt="用户头像" />
                            <el-icon v-else size="60">
                                <User />
                            </el-icon>
                        </el-avatar>
                        <div class="avatar-overlay" @click="handleAvatarClick">
                            <el-icon size="24">
                                <Camera />
                            </el-icon>
                        </div>
                    </div>
                    <div class="user-info">
                        <h2 class="user-name">{{ ruleForm.userNickName || '未设置昵称' }}</h2>
                        <p class="user-role">{{ ruleForm.roleId || '普通用户' }}</p>
                        <p class="user-status" :class="ruleForm.userStatus ? 'status-active' : 'status-inactive'">
                            {{ ruleForm.userStatus ? '在线' : '离线' }}
                        </p>
                    </div>
                </div>

                <div class="action-buttons">
                    <el-button type="primary" :icon="Edit" @click="toggleEditMode">
                        {{ isEditMode ? '取消编辑' : '编辑资料' }}
                    </el-button>
                    <el-button type="success" :icon="Check" @click="submitForm(ruleFormRef)" v-if="isEditMode">
                        保存修改
                    </el-button>
                </div>
            </div>

            <!-- 详细信息区域 -->
            <div class="profile-content">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="profile-form">
                    <div class="form-section">
                        <h3 class="section-title">
                            <el-icon>
                                <User />
                            </el-icon>
                            基本信息
                        </h3>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="用户昵称" prop="userNickName">
                                    <el-input v-model="ruleForm.userNickName" :disabled="!isEditMode"
                                        placeholder="请输入用户昵称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="用户名" prop="userName">
                                    <el-input v-model="ruleForm.userName" :disabled="!isEditMode"
                                        placeholder="请输入用户名" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="性别" prop="userSex">
                                    <el-radio-group v-model="ruleForm.userSex" :disabled="!isEditMode">
                                        <el-radio :value="false">男</el-radio>
                                        <el-radio :value="true">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="手机号码" prop="userPhone">
                                    <el-input v-model="ruleForm.userPhone" :disabled="!isEditMode"
                                        placeholder="请输入手机号码" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="form-section">
                        <h3 class="section-title">
                            <el-icon>
                                <Message />
                            </el-icon>
                            联系方式
                        </h3>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="邮箱地址" prop="userEmail">
                                    <el-input v-model="ruleForm.userEmail" :disabled="!isEditMode"
                                        placeholder="请输入邮箱地址" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所在地" prop="address">
                                    <el-input v-model="ruleForm.address" :disabled="!isEditMode" placeholder="请输入所在地" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="form-section" v-if="isEditMode">
                        <h3 class="section-title">
                            <el-icon>
                                <Lock />
                            </el-icon>
                            安全设置
                        </h3>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="新密码" prop="password">
                                    <el-input v-model="ruleForm.password" type="password" show-password
                                        placeholder="请输入新密码" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="确认密码" prop="confirmPassword">
                                    <el-input v-model="confirmPassword" type="password" show-password
                                        placeholder="请确认新密码" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="form-section">
                        <h3 class="section-title">
                            <el-icon>
                                <Setting />
                            </el-icon>
                            账户信息
                        </h3>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="证件类型" prop="documentTypeId">
                                    <el-select v-model="ruleForm.documentTypeId" :disabled="!isEditMode"
                                        placeholder="请选择证件类型">
                                        <el-option label="身份证" :value="1" />
                                        <el-option label="护照" :value="2" />
                                        <el-option label="驾驶证" :value="3" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="用户状态" prop="userStatus">
                                    <el-switch v-model="ruleForm.userStatus" :disabled="!isEditMode" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
        </div>
    </div>

    <!-- 头像上传弹框 -->
    <el-dialog v-model="avatarDialogVisible" title="上传头像" width="400px" class="avatar-dialog" center>
        <div class="avatar-upload-content">
            <div class="avatar-preview">
                <el-avatar :size="120" class="preview-avatar">
                    <img v-if="previewAvatarUrl" :src="previewAvatarUrl" alt="预览头像" />
                    <el-icon v-else size="60">
                        <User />
                    </el-icon>
                </el-avatar>
            </div>

            <div class="upload-section">
                <el-upload class="avatar-uploader" :show-file-list="false" :before-upload="beforeAvatarUpload"
                    :http-request="handleAvatarUpload" accept="image/*">
                    <el-button type="primary" :icon="Upload">选择图片</el-button>
                </el-upload>

                <div class="upload-tips">
                    <p>支持 JPG、PNG 格式</p>
                    <p>文件大小不超过 2MB</p>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="avatarDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmAvatarUpload" :loading="uploading">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Reads, Writes } from '@/Utils/axiosHelper'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
import type { FormInstance, FormRules } from 'element-plus'
import { User, Camera, Edit, Check, Message, Lock, Setting, Upload } from '@element-plus/icons-vue'

interface RuleForm {
    "userNickName": string,
    "userName": string,
    "password": string,
    "userSex": boolean,
    "userPhone": string,
    "userEmail": string,
    "address": string,
    "documentTypeId": number,
    "userStatus": boolean,
    "roleId": string,
    "createUserNo": string
}

const ruleFormRef = ref<FormInstance>()
const isEditMode = ref(false)
const confirmPassword = ref('')
const avatarUrl = ref('')
const avatarDialogVisible = ref(false)
const previewAvatarUrl = ref('')
const uploading = ref(false)
const selectedFile = ref<File | null>(null)

const ruleForm = reactive<RuleForm>({
    "userNickName": counter.user.userNickName || "",
    "userName": counter.user.userName || "",
    "password": "",
    "userSex": false,
    "userPhone": "",
    "userEmail": "",
    "address": "",
    "documentTypeId": 1,
    "userStatus": true,
    "roleId": counter.user.roleName || "普通用户",
    "createUserNo": counter.user.userNo
})

const rules = reactive<FormRules<RuleForm>>({
    userNickName: [
        { required: true, message: '请输入用户昵称！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    userName: [
        { required: true, message: '请输入用户名！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    userSex: [
        { required: true, message: '请选择性别！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    userPhone: [
        { required: true, message: '请输入手机号码！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    userEmail: [
        { required: true, message: '请输入邮箱！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入所在地！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    documentTypeId: [
        { required: true, message: '请选择证件类型！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    userStatus: [
        { required: true, message: '请选择用户状态！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    roleId: [
        { required: true, message: '请选择！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            Writes.post("/Management/AddUser", ruleForm).then(res => {
                if (res.data.code == 100) {
                    ElMessage.success(res.data.message)
                }
                else {
                    ElMessage.error(res.data.message)
                    resetForm(formEl)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 切换编辑模式
const toggleEditMode = () => {
    isEditMode.value = !isEditMode.value
    if (!isEditMode.value) {
        // 取消编辑时重置表单
        resetForm(ruleFormRef.value)
    }
}

// 处理头像点击
const handleAvatarClick = () => {
    avatarDialogVisible.value = true
}

// 头像上传前的验证
const beforeAvatarUpload = (file: File) => {
    const isImage = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }

    // 预览图片
    const reader = new FileReader()
    reader.onload = (e) => {
        previewAvatarUrl.value = e.target?.result as string
    }
    reader.readAsDataURL(file)

    selectedFile.value = file
    return false // 阻止自动上传
}

// 处理头像上传
const handleAvatarUpload = (options: any) => {
    // 这里可以添加实际的上传逻辑
    console.log('上传文件:', options.file)
}

// 确认头像上传
const confirmAvatarUpload = async () => {
    if (!selectedFile.value) {
        ElMessage.warning('请先选择图片')
        return
    }

    uploading.value = true

    try {
        // 模拟上传过程
        await new Promise(resolve => setTimeout(resolve, 2000))

        // 更新头像URL
        avatarUrl.value = previewAvatarUrl.value

        ElMessage.success('头像上传成功!')
        avatarDialogVisible.value = false

        // 重置状态
        previewAvatarUrl.value = ''
        selectedFile.value = null

    } catch (error) {
        ElMessage.error('头像上传失败，请重试')
    } finally {
        uploading.value = false
    }
}

// 组件挂载时加载用户信息
onMounted(() => {
    // 这里可以添加加载用户详细信息的逻辑
    console.log('个人信息页面已加载')
})
</script>

<style scoped>
/* 个人信息页面样式 */
.user-profile-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* 面包屑导航样式 */
.breadcrumb-container {
    margin: 0 auto 30px;
    max-width: 1200px;
}

.breadcrumb-nav {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    margin-bottom: 20px;
}

.breadcrumb-link {
    color: #606266;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #409EFF;
}

.breadcrumb-text {
    color: #606266;
    font-size: 14px;
}

.breadcrumb-current {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

/* 页面标题样式 */
.page-header {
    margin-bottom: 20px;
}

.page-title {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.page-description {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 16px;
    color: #909399;
    margin: 0;
    line-height: 1.4;
}

/* 分隔线样式 */
.divider {
    height: 2px;
    background: linear-gradient(90deg, #9281ce 0%, #828fd5 50%, #08a8cc 100%);
    margin: 20px 0;
    border-radius: 1px;
}

/* 个人信息卡片样式 */
.profile-card {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* 个人信息头部样式 */
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.avatar-container {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avatar-container:hover {
    transform: scale(1.05);
}

.user-avatar {
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.avatar-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.avatar-overlay:hover {
    background: white;
    transform: scale(1.1);
}

.user-info h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-role {
    font-size: 16px;
    opacity: 0.9;
    margin: 0 0 8px 0;
}

.user-status {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    font-weight: 500;
}

.status-active {
    background: rgba(103, 194, 58, 0.2);
    color: #67C23A;
}

.status-inactive {
    background: rgba(245, 108, 108, 0.2);
    color: #F56C6C;
}

.action-buttons {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* 个人信息内容样式 */
.profile-content {
    padding: 40px;
}

.profile-form {
    max-width: 800px;
}

.form-section {
    margin-bottom: 40px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #409EFF;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e4e7ed;
}

.section-title .el-icon {
    color: #409EFF;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-input__wrapper) {
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
    border-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

:deep(.el-input__wrapper.is-focus) {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-select .el-input__wrapper) {
    border-radius: 8px;
}

:deep(.el-radio-group) {
    display: flex;
    gap: 16px;
}

:deep(.el-radio) {
    margin-right: 0;
}

:deep(.el-switch) {
    --el-switch-on-color: #67C23A;
}

/* 按钮样式 */
.action-buttons .el-button {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 头像上传弹框样式 */
.avatar-dialog {
    border-radius: 16px;
    overflow: hidden;
}

.avatar-upload-content {
    text-align: center;
    padding: 20px;
}

.avatar-preview {
    margin-bottom: 24px;
}

.preview-avatar {
    border: 4px solid #e4e7ed;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.preview-avatar:hover {
    border-color: #409EFF;
    transform: scale(1.05);
}

.upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.avatar-uploader {
    display: inline-block;
}

.upload-tips {
    color: #909399;
    font-size: 14px;
    line-height: 1.5;
}

.upload-tips p {
    margin: 4px 0;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
    min-width: 80px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dialog-footer .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 头像图片样式 */
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .user-profile-container {
        padding: 10px;
    }

    .profile-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .avatar-section {
        flex-direction: column;
        gap: 16px;
    }

    .profile-content {
        padding: 20px;
    }

    .form-section {
        padding: 16px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .action-buttons {
        flex-direction: column;
        width: 100%;
    }

    .action-buttons .el-button {
        width: 100%;
    }
}
</style>
